<template>
  <div calss="TestStrat">
      <div>
        <van-nav-bar
        :title="`科目一顺序练习`"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
      </div>
      <div class="h500px">
        <!-- 头像 -->
        <div class="img">
          <!-- <van-image
          round
          v-imagerror="defaultImg"
          :src="$store.state.user.userDetailInfo.avarta"
          class="imgsize"
        /> -->
        <img
        v-imagerror="defaultImg"
        :src="$store.state.user.userDetailInfo.avarta"
        class="imgsize"
        >
        <span>hello !     {{this.$store.state.user.userDetailInfo.nichen}}</span>

        </div>

        <span class="size">每次练习10道题</span>
        <van-grid  :column-num="3">
          <van-grid-item text="文字" >
            <span>1768</span>
            <i>未做题</i>
          </van-grid-item>
          <van-grid-item text="文字" >
            <span>0</span>
            <i>错题</i>
          </van-grid-item>
          <van-grid-item text="文字" >
            <span>0%</span>
            <i>答错率</i>
          </van-grid-item>
        </van-grid>
        <van-button
          @click="goPractice"
          size="large"
          round type="info"
          color="linear-gradient(to right, rgb(42, 186, 247), rgb(56, 148, 249))
          ">开始练习</van-button>
      </div>
  </div>
</template>

<script>
export default {
  name: 'test',
  data () {
    return {
      defaultImg: 'https://img01.yzcdn.cn/vant/cat.jpeg',
      show: false
    }
  },
  methods: {
    onClickLeft () {
      this.$router.back()
    },
    goPractice () {
      this.$dialog.confirm({
        title: '',
        message: '确认开始练习吗'
      })
        .then(() => {
          // on confirm
          console.log(1)
          this.$router.push('/Practice')
        })
        .catch(() => {
          // on cancel
        })
    }
  }

}
</script>

<style scoped lang="less">
.TestStrat {
  background-color: rgb(41, 111, 252) !important;
}
.h500px{
  position: relative;
  left: 5%;
  height: 500px;
  width: 90%;
}
.img {
  width: 50%;
  height: 200px;
  position: relative;
  top: 10%;
  left: 25%;
  text-align: center;
  margin-bottom: 50%;
  .imgsize {
    width: 320px;
    height: 320px;
    border-radius: 50%;
    margin-bottom: 20px;
  }
  span {
  font-size: 50px;
  color: #ccc;
  }
}
.van-grid-item__content {
  span{
    font-size: 48px;
  }
  i {
    font-size: 24px;
    font-style: normal;
  }
}
.size {
  text-align: center;
  font-size: 48px;
}
</style>
